import React from 'react';
import { render as renderAmis } from 'amis';

class Camera extends React.Component {
  render() {
    return renderAmis(
      {
        type: "page",
        title: "详情页1",  // 页面标题
        "regions": [
          "body"
        ],
        "body": [
          // 固定菜单
          {
            "type": "container",
            "body": [
              {
                "type": "avatar",
                "showtype": "image",
                "icon": "",
                "fit": "cover",
                "style": {
                  "width": 50,
                  "height": 50,
                  "borderRadius": 50,
                  "fontFamily": "",
                  "fontSize": 12,
                  "backgroundColor": "",
                  "backgroundSize": "",
                  "backgroundPosition": "",
                  "backgroundImage": "",
                  "borderLeftStyle": "solid",
                  "borderTopStyle": "solid",
                  "borderRightStyle": "solid",
                  "borderBottomStyle": "solid",
                  "marginBottom": "20px"
                },
                "id": "u:b76cb4ea45b2",
                "gap": 4,
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "refresh"
                      }
                    ]
                  }
                },
                "src": "https://i.postimg.cc/c1KVGjw0/R.png"
              },
              {
                "type": "avatar",
                "showtype": "image",
                "icon": "",
                "fit": "cover",
                "style": {
                  "width": 50,
                  "height": 50,
                  "borderRadius": 50,
                  "fontFamily": "",
                  "fontSize": 12,
                  "backgroundColor": "",
                  "backgroundSize": "",
                  "backgroundPosition": "",
                  "backgroundImage": "",
                  "borderLeftStyle": "solid",
                  "borderTopStyle": "solid",
                  "borderRightStyle": "solid",
                  "borderBottomStyle": "solid",
                  "marginBottom": "20px"
                },
                "id": "u:3fe40ddbc6be",
                "gap": 4,
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "url",
                        "args": {
                          "url": "/home",
                          "blank": false
                        }
                      }
                    ]
                  }
                },
                "src": "https://i.postimg.cc/bJPsfbFj/780.jpg"
              },
              {
                "type": "avatar",
                "showtype": "image",
                "icon": "",
                "fit": "cover",
                "style": {
                  "width": 50,
                  "height": 50,
                  "borderRadius": 50,
                  "fontFamily": "",
                  "fontSize": 12,
                  "backgroundColor": "",
                  "backgroundSize": "",
                  "backgroundPosition": "",
                  "backgroundImage": "",
                  "borderLeftStyle": "solid",
                  "borderTopStyle": "solid",
                  "borderRightStyle": "solid",
                  "borderBottomStyle": "solid"
                },
                "id": "u:3aa82b01de1f",
                "gap": 4,
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "goBack"
                      }
                    ]
                  }
                },
                "src": "https://i.postimg.cc/W4kF1Czg/power-svgrepo-com.png"
              }
            ],
            "style": {
              "position": "fixed",
              "display": "flex",
              "flexWrap": "nowrap",
              "flexDirection": "column",
              "alignItems": "center",
              "overflowX": "visible",
              "width": "80px",
              "justifyContent": "center",
              "zIndex": 1,
              "inset": "auto 10px 10px auto"
            },
            "size": "none",
            "wrapperBody": false,
            "id": "u:74e24a3d423e",
            "isFixedHeight": false,
            "isFixedWidth": true,
            "stickyPosition": "auto",
            "originPosition": "right-bottom",
            "onEvent": {
              "click": {
                "weight": 0,
                "actions": []
              }
            }
          },
          // 内容上部
          {
            "type": "flex",
            "items": [
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:e5a21a594886",
                "themeCss": {
                  "baseControlClassName": {
                    "background:default": "var(--colors-neutral-fill-10)"
                  }
                }
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "tpl",
                        "tpl": "只测试摄像头是否可用",
                        "inline": true,
                        "wrapperComponent": "",
                        "id": "u:edd5acb6e1f6",
                        "themeCss": {
                          "baseControlClassName": {
                            "font:default": {
                              "color": "var(--colors-neutral-fill-11)",
                              "fontSize": "var(--fonts-size-8)"
                            },
                            "padding-and-margin:default": {
                              "marginTop": "var(--sizes-size-2)",
                              "marginRight": "var(--sizes-size-2)",
                              "marginBottom": "var(--sizes-size-2)",
                              "marginLeft": "var(--sizes-size-2)"
                            }
                          }
                        }
                      }
                    ],
                    "style": {
                      "position": "relative",
                      "display": "flex",
                      "inset": "auto",
                      "flexWrap": "nowrap",
                      "flexDirection": "column",
                      "alignItems": "flex-start",
                      "flex": "0 0 auto",
                      "justifyContent": "center"
                    },
                    "size": "none",
                    "wrapperBody": false,
                    "id": "u:cf0f7d207e85",
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "themeCss": {
                      "baseControlClassName": {
                        "padding-and-margin:default": {
                          "paddingTop": "1.25rem",
                          "paddingRight": "6.25rem",
                          "paddingBottom": "var(--sizes-base-10)",
                          "paddingLeft": "6.25rem"
                        },
                        "background:default": "#409eff"
                      }
                    }
                  },
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "form",
                        "id": "u:15ba688c00ad",
                        "title": "",
                        "mode": "flex",
                        "labelAlign": "right",
                        "dsType": "api",
                        "feat": "Insert",
                        "body": [
                          {
                            "type": "checkboxes",
                            "label": "",
                            "name": "checkboxes",
                            "multiple": true,
                            "options": [
                              {
                                "label": "人脸能识别",
                                "value": "A"
                              },
                              {
                                "label": "测温",
                                "value": "B"
                              },
                              {
                                "label": "人证比对",
                                "value": "C"
                              }
                            ],
                            "row": 0,
                            "id": "u:53a48b6a310d",
                            "colSize": "1",
                            "checkAll": false,
                            "joinValues": true,
                            "defaultCheckAll": false,
                            "mode": "inline",
                            "className": ""
                          }
                        ],
                        "actions": [
                          {
                            "type": "container",
                            "body": [
                              {
                                "type": "button",
                                "label": "打开摄像头",
                                "onEvent": {
                                  "click": {
                                    "actions": [
                                      {
                                        "componentId": "u:15ba688c00ad",
                                        "ignoreError": false,
                                        "outputVar": "submitResult",
                                        "actionType": "submit",
                                        "args": {}
                                      }
                                    ]
                                  }
                                },
                                "id": "u:f86d3d974ca4",
                                "level": "light",
                                "themeCss": {
                                  "className": {
                                    "background:default": "#409eff",
                                    "font:default": {
                                      "color": "var(--colors-neutral-fill-11)",
                                      "fontSize": "var(--fonts-size-8)"
                                    },
                                    "padding-and-margin:default": {
                                      "marginTop": "var(--sizes-size-4)",
                                      "marginRight": "var(--sizes-size-4)",
                                      "marginBottom": "var(--sizes-size-4)",
                                      "marginLeft": "var(--sizes-size-4)"
                                    }
                                  }
                                }
                              },
                              {
                                "type": "button",
                                "label": "关闭摄像头",
                                "onEvent": {
                                  "click": {
                                    "actions": [
                                      {
                                        "componentId": "u:15ba688c00ad",
                                        "ignoreError": false,
                                        "outputVar": "submitResult",
                                        "actionType": "submit",
                                        "args": {}
                                      }
                                    ]
                                  }
                                },
                                "id": "u:17ca993b8e2e",
                                "level": "light",
                                "themeCss": {
                                  "className": {
                                    "background:default": "#409eff",
                                    "font:default": {
                                      "color": "var(--colors-neutral-fill-11)",
                                      "fontSize": "var(--fonts-size-8)"
                                    },
                                    "padding-and-margin:default": {
                                      "marginTop": "var(--sizes-size-4)",
                                      "marginRight": "var(--sizes-size-4)",
                                      "marginBottom": "var(--sizes-size-4)",
                                      "marginLeft": "var(--sizes-size-4)"
                                    }
                                  }
                                }
                              },
                              {
                                "type": "button",
                                "label": "摄像头是否可以打开",
                                "onEvent": {
                                  "click": {
                                    "actions": [
                                      {
                                        "componentId": "u:15ba688c00ad",
                                        "ignoreError": false,
                                        "outputVar": "submitResult",
                                        "actionType": "submit",
                                        "args": {}
                                      }
                                    ]
                                  }
                                },
                                "id": "u:194c19edd613",
                                "level": "light",
                                "themeCss": {
                                  "className": {
                                    "background:default": "#409eff",
                                    "font:default": {
                                      "color": "var(--colors-neutral-fill-11)",
                                      "fontSize": "var(--fonts-size-8)"
                                    },
                                    "padding-and-margin:default": {
                                      "marginTop": "var(--sizes-size-4)",
                                      "marginRight": "var(--sizes-size-4)",
                                      "marginBottom": "var(--sizes-size-4)",
                                      "marginLeft": "var(--sizes-size-4)"
                                    }
                                  }
                                }
                              },
                              {
                                "type": "button",
                                "label": "人脸采集",
                                "onEvent": {
                                  "click": {
                                    "actions": [
                                      {
                                        "componentId": "u:15ba688c00ad",
                                        "ignoreError": false,
                                        "outputVar": "submitResult",
                                        "actionType": "submit",
                                        "args": {}
                                      }
                                    ]
                                  }
                                },
                                "id": "u:5dde4ff52370",
                                "level": "light",
                                "themeCss": {
                                  "className": {
                                    "background:default": "#409eff",
                                    "font:default": {
                                      "color": "var(--colors-neutral-fill-11)",
                                      "fontSize": "var(--fonts-size-8)"
                                    },
                                    "padding-and-margin:default": {
                                      "marginTop": "var(--sizes-size-4)",
                                      "marginRight": "var(--sizes-size-4)",
                                      "marginBottom": "var(--sizes-size-4)",
                                      "marginLeft": "var(--sizes-size-4)"
                                    }
                                  }
                                }
                              },
                              {
                                "type": "button",
                                "label": "拍照",
                                "onEvent": {
                                  "click": {
                                    "actions": [
                                      {
                                        "componentId": "u:15ba688c00ad",
                                        "ignoreError": false,
                                        "outputVar": "submitResult",
                                        "actionType": "submit",
                                        "args": {}
                                      }
                                    ]
                                  }
                                },
                                "id": "u:fcd9c8b3ff5b",
                                "level": "light",
                                "themeCss": {
                                  "className": {
                                    "background:default": "#409eff",
                                    "font:default": {
                                      "color": "var(--colors-neutral-fill-11)",
                                      "fontSize": "var(--fonts-size-8)"
                                    },
                                    "padding-and-margin:default": {
                                      "marginTop": "var(--sizes-size-4)",
                                      "marginRight": "var(--sizes-size-4)",
                                      "marginBottom": "var(--sizes-size-4)",
                                      "marginLeft": "var(--sizes-size-4)"
                                    }
                                  }
                                }
                              }
                            ],
                            "style": {
                              "position": "relative",
                              "display": "flex",
                              "inset": "auto",
                              "flexWrap": "wrap",
                              "flexDirection": "row",
                              "alignItems": "center",
                              "flex": "0 0 auto",
                              "justifyContent": "center",
                              "maxWidth": "400px",
                              "overflowX": "visible"
                            },
                            "size": "none",
                            "wrapperBody": false,
                            "id": "u:3e9182b5f2d3",
                            "isFixedWidth": false,
                            "isFixedHeight": false,
                            "themeCss": {
                              "baseControlClassName": {
                                "border:default": {
                                  "top-border-style": "var(--borders-style-1)",
                                  "left-border-style": "var(--borders-style-1)",
                                  "right-border-style": "var(--borders-style-1)",
                                  "bottom-border-style": "var(--borders-style-1)"
                                },
                                "padding-and-margin:default": {
                                  "paddingLeft": "var(--sizes-size-0)",
                                  "marginLeft": "var(--sizes-size-5)"
                                }
                              }
                            }
                          }
                        ],
                        "resetAfterSubmit": false,
                        "loadingConfig": {
                          "show": true
                        },
                        "wrapWithPanel": true,
                        "debug": false,
                        "themeCss": {
                          "panelClassName": {
                            "border:default": {
                              "top-border-style": "var(--borders-style-1)",
                              "left-border-style": "var(--borders-style-1)",
                              "right-border-style": "var(--borders-style-1)",
                              "bottom-border-style": "var(--borders-style-1)",
                              "left-border-color": "transparent",
                              "top-border-color": "transparent",
                              "right-border-color": "transparent",
                              "bottom-border-color": "transparent"
                            },
                            "padding-and-margin:default": {},
                            "background:default": "var(--colors-neutral-fill-11)"
                          },
                          "bodyControlClassName": {
                            "padding-and-margin:default": {
                              "paddingLeft": "var(--sizes-base-50)"
                            }
                          },
                          "headerControlClassName": {
                            "padding-and-margin:default": {
                              "paddingLeft": "var(--sizes-size-0)"
                            },
                            "background:default": "var(--colors-neutral-fill-11)",
                            "border:default": {
                              "top-border-color": "transparent",
                              "left-border-color": "transparent",
                              "right-border-color": "transparent",
                              "bottom-border-color": "transparent"
                            }
                          },
                          "itemClassName": {
                            "padding-and-margin": {
                              "marginLeft": "var(--sizes-size-0)"
                            }
                          },
                          "actionsControlClassName": {
                            "border:default": {
                              "top-border-style": "var(--borders-style-1)",
                              "left-border-style": "var(--borders-style-1)",
                              "right-border-style": "var(--borders-style-1)",
                              "bottom-border-style": "var(--borders-style-1)",
                              "top-border-color": "transparent",
                              "left-border-color": "transparent",
                              "right-border-color": "transparent",
                              "bottom-border-color": "transparent"
                            }
                          }
                        }
                      }
                    ],
                    "style": {
                      "position": "relative",
                      "display": "flex",
                      "inset": "auto",
                      "flexWrap": "nowrap",
                      "flexDirection": "column",
                      "alignItems": "flex-start",
                      "flex": "0 0 auto"
                    },
                    "size": "none",
                    "wrapperBody": false,
                    "id": "u:e2bbd132dc68",
                    "isFixedWidth": false
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "flex",
                  "flex": "1 1 auto",
                  "flexGrow": 2,
                  "flexBasis": "0px",
                  "flexWrap": "nowrap",
                  "justifyContent": "flex-start",
                  "flexDirection": "column",
                  "alignItems": "center"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:8c32cfed728f",
                "themeCss": {
                  "baseControlClassName": {
                    "padding-and-margin:default": {
                      "paddingTop": "1.375rem",
                      "paddingRight": "1.375rem",
                      "paddingBottom": "1.375rem",
                      "paddingLeft": "1.375rem"
                    },
                    "background:default": "var(--colors-neutral-fill-11)"
                  }
                }
              },
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:74a78b02d060",
                "themeCss": {
                  "baseControlClassName": {
                    "background:default": "var(--colors-neutral-fill-10)"
                  }
                }
              }
            ],
            "style": {
              "position": "relative",
              "rowGap": "10px",
              "columnGap": "10px",
              "flexWrap": "nowrap",
              "inset": "auto",
              "height": "40%",
              "overflowY": "visible"
            },
            "id": "u:205d6083d1e2",
            "isFixedHeight": true,
            "isFixedWidth": false
          },
          // 底部
          {
            "type": "flex",
            "items": [
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:72f96b238b2b",
                "themeCss": {
                  "baseControlClassName": {
                    "background:default": "var(--colors-neutral-fill-10)"
                  }
                }
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "tpl",
                    "tpl": "暂不支持测试页面配置串口，使用多媒体配置文件进行配置",
                    "inline": true,
                    "wrapperComponent": "",
                    "id": "u:98862254c584",
                    "themeCss": {
                      "baseControlClassName": {
                        "font:default": {
                          "color": "var(--colors-neutral-text-2)",
                          "fontSize": "var(--fonts-size-7)"
                        },
                        "padding-and-margin:default": {
                          "marginTop": "var(--sizes-size-5)",
                          "marginRight": "var(--sizes-size-5)",
                          "marginBottom": "var(--sizes-size-5)",
                          "marginLeft": "var(--sizes-size-5)"
                        }
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "flex",
                  "flex": "1 1 auto",
                  "flexGrow": 2,
                  "flexBasis": "0px",
                  "flexWrap": "nowrap",
                  "justifyContent": "flex-start",
                  "flexDirection": "column",
                  "alignItems": "center"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:dee875e38002",
                "themeCss": {
                  "baseControlClassName": {
                    "padding-and-margin:default": {
                      "paddingTop": "1.375rem",
                      "paddingRight": "1.375rem",
                      "paddingBottom": "1.375rem",
                      "paddingLeft": "1.375rem"
                    },
                    "background:default": "var(--colors-neutral-fill-11)"
                  }
                }
              },
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:e5c158e0e23c",
                "themeCss": {
                  "baseControlClassName": {
                    "background:default": "var(--colors-neutral-fill-10)"
                  }
                }
              }
            ],
            "style": {
              "position": "relative",
              "rowGap": "10px",
              "columnGap": "10px",
              "flexWrap": "nowrap",
              "inset": "auto",
              "overflowY": "visible",
              "height": "60%"
            },
            "id": "u:1f3e2604fa9c",
            "isFixedHeight": false,
            "isFixedWidth": false,
            "themeCss": {
              "baseControlClassName": {
                "padding-and-margin:default": {
                  "marginTop": "var(--sizes-size-6)"
                }
              }
            }
          }
        ],
        "style": {
          "height": "100vh",
          "overflow": "hidden"
        },
        "id": "u:da0a885ddb0c",
        "asideResizor": false,
        "pullRefresh": {
          "disabled": true
        },
        "themeCss": {
          "baseControlClassName": {
            "background:default": "var(--colors-neutral-fill-10)"
          }
        }      
      }
    );
  }
}

export default Camera;